<template>
    <div id="app">这是films
        <Swiper>
            <div
                class="swiper-slide"
                v-for="(banner) in banners"
                :key="banner.bannerId"
            >
                <img :src="banner.imgUrl" alt="">
            </div>
        </Swiper>
        <router-view></router-view>
    </div>
</template>

<script>
import Swiper from "@/components/Swiper"
// import axios from "axios"
import instance from "@/utils/http"
import Swip from "swiper"
import {mapState} from 'vuex'
export default {
    data(){
        return{
            banners:[]
        }
    },
    computed:{
        ...mapState('city',['cityId'])
    },
    components:{
        Swiper  //注册组件
    },
    created(){
        //请求数据
        instance.get(`/gateway?type=2&cityId=${this.cityId}&k=3419992`,{
            headers:{
                'X-Host': 'mall.cfg.common-banner'
            }
        }).then(res=>{
            this.banners=res.data.data
                //必须要等到页面中出现swiper-slide结构后，我们才能进行实例化操作
                console.log(res.data.data)
            this.$nextTick(()=>{
                new Swip('.swiper-container')
            })
        })
    }
}
</script>
<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
 .swiper-slide{
        img{
            width:100%
        }
    }
</style>